<script setup>
import { reactive,defineProps} from 'vue';
import { Swiper,SwiperSlide } from 'swiper/vue';
import {Pagination} from "swiper/modules"
import "swiper/css"
import "swiper/css/pagination"
const modules=reactive([Pagination]);

const props=defineProps({
    topStories:Array //指定是数组
});
//console.log("组件的props书数据====》",props.topStories)

</script>
<template>
    <Swiper class="swiper" :modules="modules" 
    :pagination="{clickable:true}">
     <SwiperSlide v-for="item in props.topStories" :key="item.id">
        <div class="banner">
            <RouterLink class="banner-img" :to="`/detail/${item.id}`">
            <img v-bind:src="item.image">
        </RouterLink>
            <div class="t" :style="{backgroundImage:`linear-gradient(to top,${item.image_hue.replace('0x','#')},rgba(255,255,255,0.1))`}">
                <h1>{{ item.title }}</h1>
                <p>{{ item.hint }}</p>
            </div>
        </div>
    </SwiperSlide>
    </Swiper>
</template>
<style scoped>
.banner{
    width: 100%;
    position: relative;
}
.banner .banner-img{
    display: block;
    /* width: 100%; */
}
.banner img{
    width: 100%;
    height: auto;
}
.t{
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding: 10px 25px;
   width: calc(100% - 50px);
}
.t>h1{
  
    font-size: 19px;
    font-weight: normal;
    color: white;
    font-family: "微软雅黑";
}
.t>p{
    color: #ddddddb6;
    font-size: 14px;
}
/*修改下标圆点*/
:deep(.swiper-pagination-bullet){
      width: 5px;
    height: 5px;
    background-color: rgba(255,255, 255, 0.8);
 
}
/*修改下标圆点高亮*/
:deep(.swiper-pagination-bullet-active){
    width: 20px;
    background-color: white;
    border-radius: 5px;
}
/*修改下标圆点位置*/
:deep(.swiper-pagination-horizontal){
    position: absolute;
    left: auto;
    right: 30px;
    width: auto;
}
</style>